<template>
  <div class="wrapper">
    <chart height="100%" width="100%" ref="chart"></chart>
  </div>
</template>

<script>
import Chart from "@/components/chart/Chart.vue";
export default {
  components: { Chart },
  props: {},
  data() {
    return {
      mockData: [
        {
          text: "指标一",
          value: 2,
        },
        {
          text: "指标二",
          value: 3.2,
        },
        {
          text: "指标三",
          value: 5,
        },
        {
          text: "指标四",
          value: 4.1,
        },
        {
          text: "指标五",
          value: 2.8,
        },
      ],
      timer: null,
      isHighlight: false,
      highlightType: "",
    };
  },
  created() {},
  mounted() {
    this.initRadar();
  },
  activated() {},
  updated() {},
  methods: {
    initRadar() {
      this.$refs.chart && this.$refs.chart.showLoading();
      var minAngle = 10; // 最小角度
      var indicator = [];  //大雷达的数据分布
      var data = [];  // 小雷达的数据分布（随机）
      var idx = 0; 
      var randomArr = this.getRandom(360 / minAngle, this.mockData.length); // 原始随机数

      for (var i = 0; i < 360 / minAngle; i++) {
        if (randomArr.indexOf(i) > -1) {
          indicator.push({
            text: this.mockData[idx].value,
          });
          data.push(this.mockData[idx].value);
          idx++;
        } else {
          indicator.push({
            text: i * 10 + "`",
          });
          data.push("-");
        }
      }
    //   console.log("原始随机数据", randomArr);
    //   console.log("小雷达图数据", data);
    //   console.log("大雷达图数据", indicator);

      var options = {
        backgroundColor: "#333",
        radar: [
          {
            indicator: indicator,
            center: ["50%", "50%"],
            radius: 180,
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",
            name: {
              show: true,
            },
            splitArea: {
              areaStyle: {
                color: "rgba(255, 255, 255, 0)",
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0, 255, 51, 0)",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(0, 255, 51, 1)",
              },
            },
          },
        ],
        // 雷达圆点
        series: [
          {
            name: "雷达图",
            type: "radar",
            symbol: "circle",
            symbolSize: 24,
            silent: true,
            animationEasing: "quarticOut",
            animationEasingUpdate: "quarticOut",
            animationDuration: 2000,
            animationDurationUpdate: 2000,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "rgba(0, 255, 51, 1)",
                },
              },
            },
            itemStyle: {
              normal: {
                opacity: 0,
              },
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.3,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 51, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 255, 255, .1)",
                    },
                  ],
                },
                borderWidth: 0,
                opacity: 1,
              },
            },
            data: [
              {
                value: data,
                label: {
                  normal: {
                    textStyle: {
                      color: "rgba(0, 255, 51, 1)",
                    },
                  },
                },
                lineStyle: {
                  normal: {
                    opacity: 0,
                  },
                },
              },
            ],
          },
        ],
      };

      this.$refs.chart.initChart(options);
      this.$refs.chart && this.$refs.chart.hideLoading();
      this.initPlayAtuo();
    },
    getRandom(range, count) {
      var randomArr = [];
      for (var i = 0; i < count; i++) {
        var r = Math.round(Math.random() * (range - 1));
        randomArr.push(r);
      }
      return randomArr;
    },
    // 雷达
    initPlayAtuo() {
      this.isHighlight = false;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(this.playAtuo, 5000);
    },
    // 雷达动画方法
    playAtuo() {
      this.initRadar(this.mockData);
      this.highlightType = this.isHighlight ? "downplay" : "highlight";
      this.$refs.chart.myChart.dispatchAction({
        type: this.highlightType,
        seriesIndex: 0,
      });
      this.isHighlight = !this.isHighlight;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.wrapper {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  margin: 20px auto;
}

// 父子组件中的深度选择器
.wrapper >>> .chart::after {
  content: " ";
  display: block;
  background-image: linear-gradient(
    44deg,
    rgba(0, 255, 51, 0) 50%,
    #00ff33 100%
  );
  width: 180px;
  height: 180px;
  position: absolute;
  top: 14%;
  left: 14%;
  animation: radar-beam 4s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
